<template>
<div class="background">
	<div class="menu">
        <div class="menu_1">
           <ul>
            <li>
                <div><img src="../assets/news-img/ceshi.jpg" alt=""></div>
                <div class="news_content">
                   <div class="news_title">
                       <p>新闻标题</p>
                       <span>时间</span>
                   </div>
                   <div class="news-content_1">
                       <span>我是内容详情少时诵诗书所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所少时诵诗书所所所所所所所所所所所所所所所所所所所所所所所</span>
                   </div>
                </div>
            </li>
            <li>
                <div><img src="../assets/news-img/ceshi.jpg" alt=""></div>
                <div class="news_content">
                   <div class="news_title">
                       <p>新闻标题</p>
                       <span>时间</span>
                   </div>
                   <div class="news-content_1">
                       <span>我是内容详情少时诵诗书所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所少时诵诗书所所所所所所所所所所所所所所所所所所所所所所所</span>
                   </div>
                </div>
            </li>
            <li>
                <div><img src="../assets/news-img/ceshi.jpg" alt=""></div>
                <div class="news_content">
                   <div class="news_title">
                       <p>新闻标题</p>
                       <span>时间</span>
                   </div>
                   <div class="news-content_1">
                       <span>我是内容详情少时诵诗书所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所少时诵诗书所所所所所所所所所所所所所所所所所所所所所所所</span>
                   </div>
                </div>
            </li>
            <li>
                <div><img src="../assets/news-img/ceshi.jpg" alt=""></div>
                <div class="news_content">
                   <div class="news_title">
                       <p>新闻标题</p>
                       <span>时间</span>
                   </div>
                   <div class="news-content_1">
                       <span>我是内容详情少时诵诗书所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所少时诵诗书所所所所所所所所所所所所所所所所所所所所所所所</span>
                   </div>
                </div>
            </li>
            <li>
                <div><img src="../assets/news-img/ceshi.jpg" alt=""></div>
                <div class="news_content">
                   <div class="news_title">
                       <p>新闻标题</p>
                       <span>时间</span>
                   </div>
                   <div class="news-content_1">
                       <span>我是内容详情少时诵诗书所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所少时诵诗书所所所所所所所所所所所所所所所所所所所所所所所</span>
                   </div>
                </div>
            </li>
           </ul>
        </div>       
    </div>
</div>
</template>

<script>
	export default {
		name:'news',
	}
</script>

<style scoped>
.background{
    background-color: #f9fafa;
    margin-top: 15px;
}
.menu{
    width: 1004px;
    margin: 0 auto;
}

.menu_1{
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: center;
    padding: 20px;
    background-color: white;
}

.menu_1 > ul > li{
    margin: 10px;
    border-bottom: 2px solid #f3f5fa;
    display: flex;
    flex-direction: row;
}

.menu_1 > ul > li img{
    width: 163px;
    height: 108px;
}

.news_title{
    display: flex;
    flex-direction: row;
    margin: 0px 20px;
}

.news_title p {
    font-size: 20px;
}

.news_title span {
    margin-left: auto;
    font-size: 20px;
}

.news_content{
    display: flex;
    flex-direction: column;
    flex: 1;
}

.news-content_1 {
    margin: 20px;
    color: #787981;;
}

</style>